$(function () {
    var page = 1;
    var pageSize = 5;

    //调接口,发送ajax请求,获得数据,渲染页面
    //将获取数据并渲染封装成函数,以便需要时调用
    function render() {
        $.ajax({
            url: '/category/querySecondCategoryPaging',
            type: 'get',
            data: {
                'page': page,
                'pageSize': pageSize

            },
            success: function (backData) {
                // console.log(backData);
                //取得数据后调用模板渲染数据
                var result = template('subcategory-table', backData);
                //渲染数据
                $('.right .table tbody').html(result);
                //页码需要在获得数据后显示,所以放在ajax请求的里面
                $('#paginator').bootstrapPaginator({
                    bootstrapMajorVersion: 3, //指定分页插件版本,如果是版本3,必须指定
                    currentPage: page, //当前页
                    totalPages: Math.ceil(backData.total / pageSize), //总页数
                    size: 'small', //设置控件大小
                    onPageClicked: function (a, b, c, index) {
                        page = index;
                        render();
                    }


                })


            }
        })


    }

    //首次调用
    render();
    // 弹出添加分类模态框
    $('.add-subcategory').click(function () {

        $('#addCategory').modal("show");
    })

    //调用查询接口,查出所有一级分类名称,渲染下拉框
    $.ajax({

        url: "/category/queryTopCategoryPaging",
        type: "get",
        data: {
            'page': page,
            'pageSize': 100
        },
        success: function (backData) {
            console.log(backData);
            //取得数据后调用模板渲染数据
            var result = template('subcategory', backData);
            //渲染数据
            $('#addCategory form .dropdown-menu').html(result);


        },

    });
    //取得下拉列表选中的一级分类的值,替换掉butto里的一级分类
    $('.dropdown-menu').on('click', 'li a', function () {
        // alert(1);
        $('#dropdownMenu1').html($(this).html());
        //将被点击的a里面的dada-id保存到input[name=categoryId]里面去
        $('input[name=categoryId]').val($(this).data('id'));
    
        //有值以后更表单验证状态
        var validator = $form.data("bootstrapValidator");

        //更新input的状态,把表单元素状态设为合法状态,验证通过
        validator.updateStatus("categoryId", "VALID");

    })
  
    //上传图片并更新表单验证
    $('#fileupload').fileupload({
        dataType:'json',
        //文件上传完成时,会执行的回调函数,通过这个回调函数,就可以获得图片的地址
        done:function(e,data){
            // console.log(data);
            // console.log(data.result.picAddr);
            $('.picAddr').attr('src',data.result.picAddr);
            //将图片地址存在input里,以便添加二级分类时使用
            $("input[name=brandLogo]").val(data.result.picAddr);
            //图片上传后更新表单验证的状态
            var validator = $form.data("bootstrapValidator");

            //更新input的状态,把表单元素状态设为合法状态,验证通过
            validator.updateStatus("brandLogo", "VALID");
    
        }

    })



    //表单验证
    //表单验证
    var $form = $("form");
    //手动提交表单， 让下面的表单验证插件生效
    $("button[type=submit]").click(function () {
        $form.submit();
    });

    //设置验证规则

    $form.bootstrapValidator({
        //excluded:指定哪些表单元素不验证,默认情况下,hidden,disabled元素不验证,如果我们希望所有元素都验证,那么将它设置为空数组
        excluded: [],
        //1. 设置验证状态对应的小图标
        feedbackIcons: {
            //如果验证通过，显示的小图标
            valid: 'glyphicon glyphicon-ok',
            //验证不通过
            invalid: 'glyphicon glyphicon-remove',
            //正在验证的状态
            validating: 'glyphicon glyphicon-refresh'
        },

        fields: {
            categoryId: {
                validators: {
                    //1. 规则,验证是否输入了字符
                    notEmpty: {
                        message: "请选择一级分类"
                    }
                }
            },
            brandName: {
                validators: {
                    //1. 规则,验证是否输入了字符
                    notEmpty: {
                        message: "请选择二级分类"
                    }
                }
            },
            brandLogo: {
                validators: {
                    //1. 规则,验证是否输入了字符
                    notEmpty: {
                        message: "请选择图片"
                    }
                }
            },
        }
    });
    // 表单验证成功之后的事件处理
    $form.on("success.form.bv", function (target) {
        //阻止默认事件（提交表单）
        target.preventDefault();
        //    alert("表单验证通过");
        $.ajax({
            url: "/category/addSecondCategory",
            type: "post",
            data: $form.serialize(),
            success: function (data) {
                // console.log($form.serialize());
                   console.log(data);
                if (data.success) {
                    //刷新页面数据
                    render();

                    //把模态框隐藏
                    $("#addCategory").modal("hide");
                }
            },

        });
    });
})